html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 4vw;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.wrapper .top {
    width: 100%;

    position: sticky;
    top: 0px;
    z-index: 99;
}

.wrapper .top .top_icon {
    width: 100%;
    height: 10vw;

    display: flex;
    justify-content: right;
    align-items: center;

    margin-right: 2vw;
    margin-top: 1vw;
}

.wrapper .top .top_icon svg {
    width: 7vw;
    height: 7vw;

    margin-left: 6vw;
}

.wrapper .top .top_icon img {
    width: 7vw;
    height: 7vw;

    margin-left: 6vw;
    margin-right: 2vw;
}

.wrapper .top .top_icon .scan {
    margin-top: 2vw;

    margin-left: 2vw;
}

/*  用户信息部分  */
.wrapper .top .user {
    width: 100%;
    height: 30vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .top .user .left {
    width: 80%;
    height: 100%;

    display: flex;
    align-items: center;

    margin-left: 2vw;
}

.wrapper .top .user .left .avatar img {
    width: 18vw;
    height: 18vw;

    border-radius: 50%;
}

.wrapper .top .user .left .information {
    width: 100%;
    height: 20vw;

    margin-left: 4vw;
}

.wrapper .top .user .left .information .name {
    width: 100%;
    height: 9vw;

    display: flex;
    align-items: center;

    font-size: 5vw;

}

.wrapper .top .user .left .information .name #write {
    width: 5.5vw;
    height: 5.5vw;

    margin-left: 2vw;
    margin-top: 2vw;
}

.wrapper .top .user .left .information .name #level {
    width: 7vw;
    height: 3.5vw;

    margin-left: 2vw;
}

.wrapper .top .user .left .information .huiyuan {
    width: 16vw;
    height: 5vw;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid hotpink;
    border-radius: 1vw;

    font-size: 3.2vw;
    font-weight: bold;
    color: hotpink;


}

.wrapper .top .user .left .information .data {
    height: 8vw;

    color: #999999;
}

.wrapper .top .user .right {
    width: 20%;

    display: flex;
    justify-content: right;
    align-items: center;

    margin-right: 2vw;

    color: #999999;
}

.wrapper .top .user .right svg {
    width: 7vw;
    height: 7vw;
}

/*  用户数据部分  */
.wrapper .top .data {
    width: 100%;
    height: 12vw;

    display: flex;
    align-items: center;
}

.wrapper .top .data .dynamic {
    width: 30vw;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #999999;
}

.wrapper .top .data .dynamic .count {
    font-size: 5vw;

    color: black;
}

.wrapper .top .data .v-line {
    width: 5vw;

    display: flex;
    justify-content: center;

    border-left: 0.2vw solid #999999;
    height: 5vw;

    margin-left: 2vw;
}

.wrapper .top .data .attention {
    width: 30vw;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #999999;
}

.wrapper .top .data .attention .count {
    font-size: 5vw;

    color: black;
}

.wrapper .top .data .fans {
    width: 30vw;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #999999;
}

.wrapper .top .data .fans .count {
    font-size: 5vw;

    color: black;
}

/*  大会员部分  */
.wrapper .top .dahuiyuan {
    width: 96.5%;
    height: 18vw;

    display: flex;
    align-items: center;

    margin-left: 2vw;
    margin-top: 4vw;

    background-color: #FFE9F4;

    border-radius: 2vw;

    position: relative;
}

.wrapper .top .dahuiyuan .left {
    width: 100%;

    display: flex;
    align-items: center;

    margin-left: 4vw;
}

.wrapper .top .dahuiyuan .left .big {
    width: 14vw;
}

.wrapper .top .dahuiyuan .left .big img {
    width: 12vw;
    height: 12vw;
}

.wrapper .top .dahuiyuan .left .line1 {
    font-size: 4.5vw;
    color: hotpink;

    margin-bottom: 1vw;
}

.wrapper .top .dahuiyuan .left .line2 {
    color: hotpink;

    display: flex;
    align-items: center;
}

.wrapper .top .dahuiyuan .left .line2 svg {
    width: 5vw;
    height: 5vw;
}

.wrapper .top .dahuiyuan .right {
    width: 25vw;

    display: flex;
    align-items: center;

    font-size: 4.5vw;
    color: hotpink;

    position: absolute;
    right: 0;
}

/*  功能部分  */
.wrapper .function {
    width: 100%;
    height: 15vw;

    display: flex;
    align-items: center;
    justify-content: space-around;

    margin-top: 5vw;
}

.wrapper .function .save {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 3.5vw;
    color: #606060;
}

.wrapper .function .save img {
    width: 10vw;
    height: 10vw;

    margin-bottom: 1vw;
}

.wrapper .function .history {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 3.5vw;
    color: #606060;
}

.wrapper .function .history img {
    width: 10vw;
    height: 10vw;

    margin-bottom: 1vw;
}

.wrapper .function .collection {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 3.5vw;
    color: #606060;
}

.wrapper .function .collection img {
    width: 10vw;
    height: 10vw;

    margin-bottom: 1vw;
}

.wrapper .function .later {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 3.5vw;
    color: #606060;
}

.wrapper .function .later img {
    width: 10vw;
    height: 10vw;

    margin-bottom: 1vw;
}

/*  发视频部分  */
.wrapper .upload {
    width: 96.5%;
    height: 20vw;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border: 1px solid #FFDBE6;
    border-radius: 2vw;

    margin-left: 2vw;
    margin-top: 6vw;

    background: rgba(255, 204, 204, 0.2);
}

.wrapper .upload .left {
    width: 60%;

    margin-left: 3vw;
}

.wrapper .upload .left .line1 {
    display: flex;
    align-items: center;

    font-size: 4.7vw;
    font-weight: bold;
}

.wrapper .upload .left .line1 .up {
    width: 8vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: hotpink;

    color: white;
    border-radius: 1vw;
    font-size: 4.2vw;
    font-weight: normal;

    margin-right: 2.5vw;
}

.wrapper .upload .left .line2 {
    margin-top: 1vw;

    font-size: 3.7vw;

    color: #999999;
}

.wrapper .upload .right {
    width: 30vw;
    height: 9vw;

    background-color: hotpink;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 4vw;

    margin-right: 3vw;

    font-weight: bold;
    color: white;
}

.wrapper .upload .right img {
    width: 8vw;
    height: 6vw;
}

/*  服务列表  */
.wrapper .server {
    width: 100%;

    font-weight: bold;

    margin-top: 5vw;

    margin-left: 2vw;

    padding-bottom: 16.5vw;
}

.wrapper .server .server_list {
    width: 100%;

    margin-top: 3vw;

    margin-left: 2vw;
}

.wrapper .server .server_list li {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 5vw;
}

.wrapper .server .server_list li .left {
    display: flex;
    align-items: center;

    font-weight: normal;
    color: #606060;
}

.wrapper .server .server_list li .left img {
    width: 7vw;
    height: 7vw;

    margin-right: 2vw;
}

.wrapper .server .server_list li .right {
    margin-right: 7vw;
}

.wrapper .server .server_list li .right svg {
    width: 6vw;
    height: 6vw;
}

/*  底部部分  */
.wrapper .footer {
    width: 100%;
    height: 16.5vw;

    display: flex;
    justify-content: space-around;
    align-items: center;

    position: fixed;
    left: 0;
    bottom: 0;

    background-color: white;
}

.wrapper .footer li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: #999;
    user-select: none;
    cursor: pointer;
}

.wrapper .footer img {
    width: 8vw;
    height: 8vw;
}

.wrapper .footer p {
    font-size: 3vw;

    margin-top: 1.5vw;
}

.wrapper .footer .add {
    width: 12vw;
    height: 12vw;

    border-radius: 35%;

    background-color: hotpink;
}

.wrapper .footer .add p {
    font-size: 8vw;
    font-weight: bolder;
    color: white;

    margin-bottom: 3vw;
}